<template>
    <div>
        <div class="page-header">
            <Row>
                <Col span="4">
                    <Input v-model="aa" placeholder="入院人姓名" clearable style="width: 200px"/>
                </Col>
                <Col span="4" class="xiao">
                    <Input v-model="bb" placeholder="入院人身份证号" clearable style="width: 200px"/>
                </Col>
                <Col span="4" class="xiao">
                    <Input v-model="cc" placeholder="入院人电话号" clearable style="width: 200px"/>
                </Col>
                <Col span="1" class="ruyuna">
                    <Button type="primary" class="chaxun" @click="chaxun()">查询</Button>
                </Col>
            </Row>
        </div>
        <div class="div2">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns4" :data="data2">

                        <template slot-scope="{ row }" slot="name">
                            <strong>{{ row.name }}</strong>
                        </template>
                        <template slot-scope="{ row }" slot="cz">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="tiaochuang(row)">调空床</Button>
                            <Button type="warning" size="small" style="margin-right: 5px" @click="huanchuang(row)">换床</Button>
                            <Button type="info" size="small" @click="huanfang(row)">换房型</Button>
                        </template>

                    </Table>
                </Col>
            </Row>
        </div>
        <div class="fenye">
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                    <!--   <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>
                        <Button @click="handleSelectAll(false)">取消</Button>-->
                </Col>
                <Col span="12">
                    <Page :total="100" show-total/>
                </Col>
            </Row>
        </div>
        <div class="tianjia">
            <Modal v-model="modal2" title="请添加" width="60">

                <Row>
                    <div id="id1">
                        <Col span="10">
                            入院人姓名： <Input v-model="obj.name" placeholder="入院姓名" clearable style="width: 200px"/>
                        </Col>
                        <Col span="10">
                            <!--                            <Input v-model="obj.sex" placeholder="性别" clearable style="width: 200px" />-->
                            性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
                           <!-- <select v-model="obj.sex">
                            <option>男</option>
                            <option>女</option>
                        </select>-->
                            <Select v-model="obj.sex" style="width:200px">
                                <Option v-for="item in sexList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>

                        </Col>
                    </div>
                </Row>

                <Row>
                    <div id="id2">
                        <Col span="10">
                            年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄： <Input v-model="obj.old"
                                                                                                   placeholder="年龄"
                                                                                                   clearable
                                                                                                   style="width: 200px"/>
                        </Col>
                        <Col span="10">
                            身份证号： <Input v-model="obj.idcard" placeholder="身份证号" clearable style="width: 200px"/>
                        </Col>
                    </div>
                </Row>

                <Row>
                    <div id="id3">

                        <Col span="10">

                            电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：<Input
                                v-model="obj.tel" placeholder="电话" clearable style="width: 200px"/>
                        </Col>
                        <Col span="10">
                            家庭住址： <Input v-model="obj.dizhi" placeholder="家庭住址" clearable style="width: 200px"/>
                        </Col>
                    </div>
                </Row>

                <Row>
                    <div id="id4">

                        <Col span="10">

                            亲&nbsp;人&nbsp;电&nbsp;&nbsp;话：<Input v-model="obj.qintel" placeholder="亲人电话" clearable
                                                                style="width: 200px"/>
                        </Col>
                        <Col span="10">
                            入院时间： <Input v-model="obj.date" placeholder="入院时间" clearable style="width: 200px"/>
                        </Col>
                    </div>
                </Row>
                <Row>
                    <div id="id5">

                        <Col span="18">

                            床&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
<!--                            <Input v-model="obj.chuanghao" placeholder="床号" clearable style="width: 200px"/>-->
                            <Select v-model="build" style="width:100px" placeholder="请选择楼">
                                <Option v-for="item in buildList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                            <Select v-model="floor" style="width:100px" placeholder="请选择楼层">
                                <Option v-for="item in floorList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                            <Select v-model="room" style="width:100px" placeholder="请选择房间">
                                <Option v-for="item in roomList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                            <Select v-model="bed" style="width:100px" placeholder="请选择床号">
                                <Option v-for="item in bedList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </Col>
                    </div>
                </Row>
                <div slot="footer">
                    <Button type="primary" @click="ok">确定</Button>
                    <Button style="margin-left: 8px" @click="closeModal">取消</Button>
                </div>
            </Modal>
            <Modal v-model="modal3" title="调空床">
                        <Form :model="obj" :label-width="80">
                            <FormItem label="床号：">
                                <Select v-model="build" style="width:100px" placeholder="请选择楼">
                                    <Option v-for="item in buildList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                                <Select v-model="floor" style="width:100px" placeholder="请选择楼层">
                                    <Option v-for="item in floorList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                                <Select v-model="room" style="width:100px" placeholder="请选择房间">
                                    <Option v-for="item in roomList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                                <Select v-model="bed" style="width:100px" placeholder="请选择床号">
                                    <Option v-for="item in bedList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="primary" @click="save">确定</Button>
                    <Button style="margin-left: 8px" @click="closeModal">取消</Button>
                </div>
            </Modal>
            <Modal v-model="modal4" title="换床">
                <Form :model="obj" :label-width="80">
                    <FormItem label="姓名：">
                            <Select v-model="name" style="width:200px" placeholder="请选择姓名">
                                <Option v-for="item in nameList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="primary" @click="save2">确定</Button>
                    <Button style="margin-left: 8px" @click="closeModal">取消</Button>
                </div>
            </Modal>
            <Modal v-model="modal5" title="换房型">
                <Form :model="obj" :label-width="80">
                    <FormItem label="房型：">
                            <Select v-model="roomType" style="width:200px" placeholder="请选择房型">
                                <Option v-for="item in roomTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="primary" @click="save3">确定</Button>
                    <Button style="margin-left: 8px" @click="closeModal">取消</Button>
                </div>
            </Modal>
        </div>

        <!--            <i-select :model.sync="model1" style="width:200px">-->
        <!--                <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
        <!--            </i-select>-->
<!--        <select v-model="obj.sex">-->
<!--            <option>男</option>-->
<!--            <option>女</option>-->
<!--        </select>-->

    </div>
</template>

<script>
export default {
  data () {
    return {
      state: 0,
      name: '',
      roomType: '',
      build: '',
      floor: '',
      room: '',
      bed: '',
      chuanghao: '',
      sexList: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ],
      buildList: [
        {
          value: '1号楼',
          label: '1号楼'
        },
        {
          value: '2号楼',
          label: '2号楼'
        },
        {
          value: '3号楼',
          label: '3号楼'
        },
        {
          value: '4号楼',
          label: '4号楼'
        },
        {
          value: '5号楼',
          label: '5号楼'
        }
      ],
      floorList: [
        {
          value: '1',
          label: '一层'
        },
        {
          value: '2',
          label: '二层'
        },
        {
          value: '3',
          label: '三层'
        }
      ],
      roomList: [
        {
          value: '1',
          label: '一号屋'
        },
        {
          value: '2',
          label: '二号屋'
        },
        {
          value: '3',
          label: '三号屋'
        },
        {
          value: '5',
          label: '五号屋'
        }
      ],
      bedList: [
        {
          value: '1',
          label: '一号床'
        },
        {
          value: '2',
          label: '二号床'
        },
        {
          value: '3',
          label: '三号床'
        },
        {
          value: '5',
          label: '五号床'
        }
      ],
      nameList: [
        {
          value: '李俊辉',
          label: '李俊辉'
        },
        {
          value: '王淑琴',
          label: '王淑琴'
        },
        {
          value: '刘新辉',
          label: '刘新辉'
        },
        {
          value: '吴艳丽',
          label: '吴艳丽'
        }
      ],
      roomTypeList: [
        {
          value: '优惠房',
          label: '优惠房'
        },
        {
          value: '经济房',
          label: '经济房'
        },
        {
          value: '商务房',
          label: '商务房'
        }
      ],
      model1: '',
      aa: '',
      ss: '',
      bb: '',
      cc: '',
      data2: [],
      modal2: false,
      modal3: false,
      modal4: false,
      modal5: false,
      columns4: [
        {
          title: '入院人姓名',
          key: 'name',
          width: 100,
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          width: 65,
          align: 'center'
        },
        {
          title: '年龄',
          key: 'old',
          width: 65,
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'idcard',
          width: 160,
          align: 'center'
        },
        {
          title: '电话',
          key: 'tel',
          width: 115,
          align: 'center'
        },
        {
          title: '入院人家庭住址',
          key: 'dizhi',
          width: 280,
          align: 'center'
        },
        // {
        //   title: '亲人电话',
        //   key: 'qintel',
        //   width: 115,
        //   align: 'center'
        // },
        {
          title: '入院时间',
          key: 'date',
          width: 100,
          align: 'center'
        },
        {
          title: '床号',
          key: 'chuanghao',
          width: 100,
          align: 'center'
        },
        {
          title: '房间类型',
          key: 'roomType',
          width: 100,
          align: 'center'
        },
        {
          title: '操作',
          slot: 'cz',
          minWidth: 150,
          align: 'center'
        }
      ],
      data1: [
        {
          name: '李俊辉',
          sex: '男',
          old: '76',
          tel: '17640232587',
          idcard: '211222188502548747',
          dizhi: '辽宁省沈阳市和平区抚顺路54-1',
          qintel: '1764521023',
          date: '2019-09-03',
          chuanghao: '1号楼1-1-1',
          roomType: '优惠房'
        },
        {
          name: '王淑琴',
          sex: '女',
          old: '82',
          tel: '15898256321',
          idcard: '211222188002541235',
          dizhi: '辽宁省沈阳市沈北新区道义路28号',
          qintel: '1762052123',
          date: '2019-09-03',
          chuanghao: '4号楼3-2-2',
          roomType: '经济房'
        },
        {
          name: '刘新辉',
          sex: '男',
          old: '86',
          tel: '17640258987',
          idcard: '21122218890235124',
          dizhi: '辽宁省沈阳市和平区西塔街道52-1',
          qintel: '1764521023',
          date: '2019-09-03',
          chuanghao: '1号楼3-2-2',
          roomType: '优惠房'
        },
        {
          name: '吴艳丽',
          sex: '女',
          old: '90',
          tel: '17640232031',
          idcard: '21122218850218',
          dizhi: '辽宁省沈阳市和平区市府大路21号',
          qintel: '1764528888',
          date: '2019-09-03',
          chuanghao: '4号楼3-2-2',
          roomType: '商务房'

        }
      ],
      obj: {
        name: '',
        sex: '',
        old: '',
        idcard: '',
        tel: '',
        dizhi: '',
        qintel: '',
        date: '',
        chuanghao: ''
      }

    }
  },
  methods: {
    remove (index) {
      if (confirm('确定要删除吗') === true) {
        this.data1.splice(index, 1)
      }
    },
    tiaochuang (row) {
      this.build = ''
      this.floor = ''
      this.room = ''
      this.bed = ''
      this.modal3 = true
    },
    huanchuang (row) {
      this.name = ''
      this.modal4 = true
    },
    huanfang (row) {
      this.roomType = ''
      this.modal5 = true
    },
    show (row) {
      this.state = 0
      this.build = '1号楼'
      this.floor = '1'
      this.room = '1'
      this.bed = '1'
      this.obj = row
      this.modal2 = true
    },
    save () {
      this.chuanghao = this.build + this.floor + '-' + this.room + '-' + this.bed
      this.data1[0].chuanghao = this.chuanghao
      this.modal3 = false
      this.$Message.success('操作成功')
    },
    save2 () {
      let current = this.data1[0].chuanghao
      this.data1[0].chuanghao = this.data1[1].chuanghao
      this.data1[1].chuanghao = current
      this.modal4 = false
      this.$Message.success('操作成功')
    },
    save3 () {
      this.data1[0].roomType = this.roomType
      this.modal5 = false
      this.$Message.success('操作成功')
    },
    ok () {
      if (this.state === 1) {
        // 添加
        this.chuanghao = this.build + this.floor + '-' + this.room + '-' + this.bed
        this.obj.chuanghao = this.chuanghao
        if (this.build === '1号楼' && this.floor === '1' && this.room === '1' && this.bed === '1') {
          this.$Message.error('此床位已被占用')
          // console.log('111')
        } else {
          this.data2.push(this.obj)
          this.modal2 = false
          this.$Message.success('添加成功')
          // console.log('222')
        }
      } else {
        // 编辑
        this.obj.chuanghao = '1号楼1-1-1'
        if (this.build === '1号楼' && this.floor === '1' && this.room === '1' && this.bed === '1') {
          this.$Message.error('此床位已被占用')
          // console.log('333')
        } else {
          this.modal2 = false
          this.$Message.success('添加成功')
          // console.log('444')
        }
      }
    },
    closeModal () {
      this.modal2 = false
      this.modal3 = false
      this.modal4 = false
      this.modal5 = false
    },
    tianjia () {
      this.state = 1
      this.build = ''
      this.floor = ''
      this.room = ''
      this.bed = ''
      this.obj = {}
      // this.obj.name = ''
      // this.obj.sex = ''
      // this.obj.old = ''
      // this.obj.idcard = ''
      // this.obj.tel = ''
      // this.obj.dizhi = ''
      // this.obj.qintel = ''
      // this.obj.date = ''
      // this.obj.chuanghao = ''
      // this.data2.push(this.obj)
      this.modal2 = true
    },
    chaxun () {
      //  支持模糊查询
      //  this.xmgcqkJsonsData：用于搜索的总数据
      this.data2 = []
      let search = this.aa
      let search2 = this.bb
      let search3 = this.cc
      // console.log(aaaaaaaaaaaaaaaaaaaaa,search)

      let newListData = [] //  用于存放搜索出来数据的新数组
      if (search && search2 && search3) {
        this.data1.filter(item => {
          if (item.name.indexOf(search) !== -1 && item.idcard.indexOf(search2) !== -1 && item.tel.indexOf(search3) !== -1) {
            newListData.push(item)
          }
        })
      } else if (search) {
        this.data1.filter(item => {
          if (item.name.indexOf(search) !== -1) {
            newListData.push(item)
          }
        })
      } else if (search2) {
        this.data1.filter(item => {
          if (item.idcard.indexOf(search2) !== -1) {
            newListData.push(item)
          }
        })
      } else if (search3) {
        this.data1.filter(item => {
          if (item.tel.indexOf(search3) !== -1) {
            newListData.push(item)
          }
        })
      } else {
        this.data2 = this.data1
      }
      /* this.data1 = newListData */
      newListData.filter(item => {
        this.data2.push(item)
      })
      // console.log(newListData)
    }

  },
  created () {
    this.data2 = this.data1
  }

}
</script>

<style scoped>
    .xiao {
        margin-left: 10px;
    }

    .sdsa {
        margin-left: 55px;
    }

    .div2 {
        margin-top: 20px;
    }

    .fenye {
        margin-top: 20px;
    }

    .ruyuna {
        margin-left: 10px;
    }

    #id1 {

    }

    #id2 {
        margin-top: 10px;

    }

    #id3 {
        margin-top: 10px;

    }

    #id4 {
        margin-top: 10px;

    }

    #id5 {
        margin-top: 10px;

    }

</style>
